<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>接口调试工具</title>
		<script src="js_beautify.js"></script>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
		<script>
		//unicode解码 
		var hexToDec = function(str) {
			str=str.replace(/\\/g,"%");
			return unescape(str);
		}
		$(function(){
			$('#submit').click(function(){
				var url = $('#url').val(),
					params = $('#params').val(),
					method = $('#method').val();
				$.post('server.php',{
					url:url,
					params:params,
					method:method
				},function(data){
					data = hexToDec(data);
					var code = js_beautify(data);
					$('#api_result').html(code);
				});
			});
		});
		</script>
	</head>
	<body>
		<h1 id="title">接口调试工具</h1>
		<table>
			<tr>
				<td style="width:200px;">地址</td>
				<td>
					<input type="text" id="url" value="http://" />
				</td>
			</tr>
			<tr>
				<td>参数</td>
				<td>
					<textarea id="params" style="width:500px;height:50px;"></textarea>
					<span id="param_example">例 : name=tom&age=20 </span>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="button" id="submit"  value="提交"/>
				</td>
			</tr>
			<tr>
				<td>请求类型</td>
				<td>
					<select id="method">
						<option>POST</option>
						<option>GET</option>
					</select>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top;">返回值</td>
				<td>
					<pre id="api_result" contentEditable="true"></pre>
				</td>
			</tr>
		</table>
		<div id="footer">
			<p>By crazymus 2016</p>
		</div>
		<style>
		html,body{font-family:'微软雅黑';font-size:14px;}
		h1{font-size:24px;}
		table{ width:100%;border-collapse:collapse;}
		td{border-bottom:1px dashed #ccc;padding:5px;}
		#title{text-align:center;}
		#url{width:500px;height:30px;}
		#submit{padding:5px 20px;}
		#api_result{min-height:400px;margin:0;outline:none;}
		#method{padding:2px;}
		#param_example{color:green;}
		#api_result{background:#f7f7f7;}
		#footer{text-align:center;}
		input[type=text],textarea{border:1px solid #cccccc;font-size:16px;
		color:green;}
		</style>
	</body>
</html>